import PropTypes from 'prop-types'
import { useEffect, useRef, useState } from 'react'
import Process from '../Process'
import './index.less'
/** 
 * @src 数据源 String
 * @autoPlay 是否自动播放 Boolean
 * @controls 显示控制 Boolean
 * @next 下一个触发事件 Function
 * @title 视频标题 String
 * @avator 封面 String
 **/
function Audio(props){
    let { src, autoPlay, controls, next, title, avator } = props
    const audio = useRef(null)
    let [current, setCurrent] = useState(0)
    let [total, setTotal] = useState(10)
    let [reId, setReid] = useState(null)
    useEffect(()=>{
        if(audio.current){
            playFlag()
        }
        return ()=>{
            cancelAnimationFrame(reId)
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    useEffect(()=>{
        if(audio.current){
            playFlag()
            audio.current.play()
        }
        return ()=>{
            cancelAnimationFrame(reId)
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[src])
    function playFlag() {
        // console.log(audio.current)
        if ( audio.current === null || audio.current.ended) {
            return;
        }
        setCurrent(audio.current.currentTime)
        setTotal(audio.current.duration)
        let id = window.requestAnimationFrame(playFlag);
        setReid(id)
    }
    return (
        <div className="Audio">
            <div className='audio_img'>
                {avator && <img alt='' src={avator}/>}
            </div>
            <div className='audio_body'>
            <div className='audio_header'>
                {title}
            </div>
            <div className="control">
                <Process
                    total={total}
                    current={current}
                    onClick={(current)=>{
                        audio.current.currentTime = current
                        audio.current.play()
                    }}
                />
                {controls&&<div className='controls'>
                    <i 
                        className='buttons iconfont icon-a-zhongboshuaxin'
                        onClick={()=>{
                            if(audio.current){
                                audio.current.currentTime = 0
                                setCurrent(audio.current.currentTime)
                                cancelAnimationFrame(reId)
                                playFlag()
                                audio.current.play()
                            }
                        }}    
                    ></i>
                    <i 
                        className={`buttons iconfont ${audio.current?.paused?'icon-bofang':'icon-zanting'}`}
                        onClick={()=>{
                            if(audio.current){
                                if(!audio.current.paused)
                                    audio.current.pause()
                                else
                                    audio.current.play()
                            }
                        }}
                    >
                    </i>
                    <i 
                        className='buttons iconfont icon-24gf-next'
                        onClick={()=>{
                            if(next)
                                next()
                        }}
                    >

                    </i>
                </div>}
            </div>
            <audio 
                ref={audio}
                src={src} 
                autoPlay={autoPlay}
            ></audio>
            </div>
        </div>
    )
}
Audio.propTypes = {
    src: PropTypes.string, 
    autoPlay: PropTypes.bool,
    controls:PropTypes.bool,
    audioArr: PropTypes.array,
    next: PropTypes.func,
    title: PropTypes.string,
    avator: PropTypes.string,
}
Audio.defaultProps = {
    audioArr: [],
    src: '', 
    autoPlay: true,
    controls: true,
    next: ()=>{},
    avator:''
}
export default Audio